<!--
 * @description: 电气 预测结果
 * @author: cuicui
 * @Date: 2023-11-23 11:55:06
 * @LastEditTime: 2023-11-30 14:00:37
 * @LastEditors: cuicui
-->
<template>
  <business-layout title="预测结果">
    <div style="height: 100%;">
      <div style="height: 50%;width: 100%;">
        <a-row style="height: 40px;">
          <a-col :span="2">
            <p class="chart-title">发电功率</p>
          </a-col>
          <a-col :span="22">
            <a-form :form="form1" layout="inline" @submit="handleQueryData">
              <a-form-item>
                <a-select style="width: 140px;" placeholder="请选择设备" v-decorator="['equipment_type']">
                  <a-select-option value="0">类型1</a-select-option>
                  <a-select-option value="1">类型2</a-select-option>
                  <a-select-option value="2">类型3</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="指定日期">
                <a-date-picker v-decorator="['begin_date' ]" />
              </a-form-item>
              <a-form-item label="至">
                <a-date-picker v-decorator="['end_date']" />
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit">
                  <a-icon type="search" />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-row style="height: calc(100% - 40px);width: 100%;">
          <a-col :span="24" style="height: 100%;width: 100%;">
            <line-chart
              :loading="lineSpinning"
              height="100%"
              width="100%"
              :x-data="['a', 'b', 'c', 'd', 'd', 'e', 'f']"
              :y-data="[111, 999, 22, 33, 66, 44, 55]"
            />
          </a-col>
        </a-row>
      </div>

      <div style="height: 50%;width: 100%;">
        <a-row style="height: 40px;">
          <a-col :span="2">
            <p class="chart-title">发电量</p>
          </a-col>
          <a-col :span="22">
            <a-form :form="form2" layout="inline" @submit="handleQueryData2">
              <a-form-item>
                <a-select style="width: 140px;" placeholder="请选择设备" v-decorator="['equipment_type']">
                  <a-select-option value="0">类型1</a-select-option>
                  <a-select-option value="1">类型2</a-select-option>
                  <a-select-option value="2">类型3</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="指定日期">
                <a-date-picker v-decorator="['begin_date' ]" />
              </a-form-item>
              <a-form-item label="至">
                <a-date-picker v-decorator="['end_date']" />
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit">
                  <a-icon type="search" />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-row style="height: calc(100% - 50px)">
          <a-col :span="24" style="height: 100%;">
            <bar-chart
              :loading="barSpinning"
              height="100%"
              width="100%"
              :x-data="['a', 'b', 'c', 'd', 'd', 'e', 'f']"
              :y-data="[111, 999, 22, 33, 66, 44, 55]"
            />
          </a-col>
        </a-row>
      </div>
    </div>
    <create-chart
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </business-layout>
</template>

<script>
import { LineChart, BarChart } from '@/business-components/charts'
import CreateChart from '@/business-components/create-chart'
// import moment from 'moment'
export default {
  name: 'HistoryTime',
  mixins: [],
  components: {
    LineChart,
    BarChart,
    CreateChart
  },
  props: {},
  watch: {},
  computed: {},
  data () {
      return {
        activeKey: '1',
        form1: this.$form.createForm(this),
        form2: this.$form.createForm(this),
        myBarChart: null,
        lineSpinning: true,
        barSpinning: true,
        visible: false,
        mdl: null,
        confirmLoading: false
      }
  },
  created () {},
  methods: {
    handleAdd () {
      this.mdl = null
      this.visible = true
    },
    handleQueryData () {
      this.lineSpinning = true
      setTimeout(() => {
        this.lineSpinning = false
      }, 1000)
    },
    handleQueryData2 () {
      this.barSpinning = true
      setTimeout(() => {
        this.barSpinning = false
      }, 1000)
    },
    handleCancel () {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleOk () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          if (values.id > 0) {
            // 修改 e.g.
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve()
              }, 1000)
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.success('更新成功')
            })
          } else {
            // 新增
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve()
              }, 1000)
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.success('新增成功')
            })
          }
        } else {
          this.confirmLoading = false
        }
      })
    }
  },
  mounted () {
    this.handleQueryData()
    this.handleQueryData2()
  },
  updated () {},
  destroyed () {}
}
</script>
<style lang='less' scoped>
.chart-title{
  font-size: 24px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  color: #4470D8;
  line-height: 32px;
}
</style>
